AMP

Мгновенно, плавно, приятно глазу

Создавайте ориентированные на пользователя сайты с легкостью с помощью AMP.

Начало работы
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

Что такое
AMP?

Это веб-страницы, которые притягивают взгляд, моментально загружаются и плавно работают

AMP — это простой и надежный формат, который служит для того, чтобы сайт быстро работал, ориентировался на пользователя и приносил прибыль. AMP обеспечивает долгосрочный успех веб-стратегии благодаря распространению на различных популярных платформах и снижению затрат на эксплуатацию и разработку.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

Создайте прекрасные впечатления у пользователей по всему Интернету

AMP позволяет создавать веб-сайты и рекламу, которые одинаково быстро работают и красиво смотрятся на всех устройствах и платформах распространения. Издатели и рекламодатели могут выбрать, как представить свой контент, чтобы подчеркнуть ориентированность на пользователя.

Скриншот сайта, использующего AMP.
Скриншот сайта, использующего AMP.
Сохраняйте гибкость и управляемость, уменьшая сложность кода Вы можете использовать CSS для настройки стилей и динамических данных для подстановки самой свежей информации в необходимые места.
Разрабатывайте эффективнее с помощью готовых блоков Создание отличного веб-сайта требует много времени и усилий. Компоненты AMP уже оптимизированы для максимальной эффективности.
Создавайте устойчивое будущее для всех в открытом Интернете Проект AMP — это инициатива с открытым исходным кодом, призванная защитить будущее Интернета, предоставляя лучший, более быстрый и удобный для пользователей интерфейс.
Скорость работы веб-страницы улучшает взаимодействие с пользователем и основные показатели бизнеса AMP-страницы загружаются практически мгновенно на любых устройствах и платформах.
Создавать AMP-страницы просто Во многих случаях вы можете конвертировать весь свой архив за несколько дней, особенно если используете популярную CMS, такую как WordPress или Drupal.
Технология AMP может быть применена к различным аспектам сети Используемая глобальными платформами, такими как Google, Bing и Twitter, AMP позволяет пользователям чувствовать себя как дома на всех площадках, по умолчанию используя AMP-страницы, если они доступны.

Мы стремимся увеличить скорость по всем направлениям. Если загрузка нашего сайта занимает много времени, уже неважно, насколько хороши наши статьи — некоторые люди уйдут со страницы, не успев ее увидеть.

Дэвид Меррелл, старший менеджер по продукту

Читать историю успеха

Из чего сделан AMP HTML

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

Встроенные компоненты

AMP HTML — это HTML с некоторыми ограничениями, необходимыми для надежной работы.

Хотя большинство тегов на AMP HTML-странице являются обычными HTML-тегами, некоторые HTML-теги заменяются особыми AMP-тегами (см. также HTML-теги в спецификации AMP). Эти пользовательские элементы, называемые AMP HTML-компонентами, облегчают реализацию типичных сценариев.

Например, тег amp-img обеспечивает полную поддержку srcset даже в браузерах, которые его еще не поддерживают. Узнайте, как создать свою первую AMP HTML-страницу.

AMP-страницы обнаруживаются поисковыми системами и другими платформами по тегам HTML. Вы можете выбрать индексацию не-AMP версии и AMP версии своей страницы, либо индексацию только AMP-версии.

AMP-кеши

AMP-страницы могут быть кешированы для практически мгновенной загрузки в Интернете. Такие платформы, как Google, используют AMP-кеши, чтобы быстрее загружать ваш контент.

Google AMP Cache — это сеть доставки контента, основанная на прокси, предназначенная для загрузки всех прошедших проверку AMP-документов. Она вызывает AMP HTML-страницы, кеширует их и автоматически повышает скорость работы страницы. При использовании Google AMP Cache документ, все JS-файлы и изображения загружаются из одного и того же источника, который для максимальной эффективности использует HTTP 2.0.
В кеш также встроена система проверки, которая подтверждает, что страница гарантированно работает и не зависит от внешних ресурсов. Система проверки запускает серию контрольных операторов, подтверждающих, что разметка страницы соответствует спецификации AMP HTML.

Еще одна версия валидатора поставляется в комплекте с каждой AMP-страницей. Эта версия может выводить ошибки валидации непосредственно в консоль браузера при рендеринге страницы, позволяя вам увидеть, как комплексные изменения в коде могут повлиять на производительность и пользовательское восприятие.

Изучить сценарии использования AMP-сайтов